<template>
  <div>
    {{  pageModel }}
    <!-- <el-button @click="dialogFormVisible = true"
               style="margin-bottom:20px">新建</el-button> -->
    <el-button @click="add"
               style="margin-bottom:20px">新建</el-button>

    <el-dialog title=""
               :visible.sync="dialogFormVisible">
      <el-form :model="form"
               id="form"
               ref="form"
               :rules="rules">
        <el-form-item label="商品类型名称"
                      :label-width="formLabelWidth"
                      prop="goodsTypeName">
          <el-input v-model="form.goodsTypeName"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="英文标识"
                      :label-width="formLabelWidth"
                      prop="symbol">
          <el-input v-model="form.symbol"
                    autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="创建时间"
                      :label-width="formLabelWidth"
                      prop="createTime">
          <el-date-picker v-model="form.createTime"
                          type="datetime"
                          placeholder="Select date and time">
          </el-date-picker>
        </el-form-item> -->
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="cancel">Cancel</el-button>
        <el-button type="primary"
                   @click="ok">Ok</el-button>
      </span>
    </el-dialog>
    <el-table :data="tableData"
              border
              align="center"
              header-align="center"
              width="100%"
              style="text-align: center;"
              tooltip-effect="dark">
      <el-table-column type="index"
                       width="80">
      </el-table-column>
      <el-table-column prop="goodsTypeName"
                       label="商品类型名称"
                       width="200">
      </el-table-column>
      <el-table-column prop="symbol"
                       label="英文标识"
                       width="200">
      </el-table-column>
      <el-table-column prop="createTime"
                       label="创建时间"
                       :formatter="timeFormat">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button class="pan-btn green-btn"
                     @click="delHandle(scope.row, scope.$index)">删除</el-button>
          <el-button class="pan-btn green-btn"
                     @click="editHandle(scope.row, scope.$index)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination layout="prev, pager, next, jumper"
                     :page-size='10'
                     :total="total"
                     :current-page.sync="currentPageNum"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'
import { parseTime } from '@/utils/index'
export default {
  name: 'productType',
  props: ['json'],
  data() {
    return {
      doll: false,
      tableData: [],
      dialogFormVisible: false,
      form: {
        // createTime: '',
        symbol: '',
        goodsTypeName: '',
        gtid: ''
      },
      rules: {
        goodsTypeName: [
          { required: true, message: '请填写商品类型名称', trigger: 'change' }
        ],
        symbol: [
          { required: true, message: '请填写英文标识', trigger: 'change' }
        ]
        // createTime: [
        //   { required: true, message: '请填写创建时间', trigger: 'change' }
        // ]
      },
      formLabelWidth: '120px',
      total: 1,
      currentPageNum: 1,
      pageSize: 10,
      pageNum: 0
    }
  },
  watch: {
    pageNum() {
      this.currentPageNum = this.pageNum + 1
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    pageModel: function() {
      console.log(this.json.pageModel)
      if (this.json.pageModel == 'productType') {
        console.log(678)
        const _this = this
        _this.axios({
          url: '/activityConsole/activityBargain/getGoodsTypeMessage',
          params: {
            pageNum: 0,
            pageSize: 10
          }
        }).then(res => {
          console.log(res)
          if (res.data.status == '200') {
            _this.tableData = res.data.data
            _this.total = parseInt(res.data.description)
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  },
  methods: {
    init() {
      const _this = this
      _this.axios({
        url: '/activityConsole/activityBargain/getGoodsTypeMessage',
        params: {
          pageNum: _this.pageNum,
          pageSize: 10
        }
      }).then(res => {
        console.log(res)
        if (res.data.status == '200') {
          _this.tableData = res.data.data
          _this.total = parseInt(res.data.description)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(val)
      this.pageNum = parseInt(val) - 1
      this.init()
    },
    cancel() {
      this.form.createTime = ''
      this.form.symbol = ''
      this.form.goodsTypeName = ''
      this.form.gtid = ''
      this.dialogFormVisible = false
    },
    add() {
      console.log(123)
      this.form.createTime = ''
      this.form.symbol = ''
      this.form.goodsTypeName = ''
      this.form.gtid = ''
      this.dialogFormVisible = true
      this.form = {}
      this.$refs.form.resetFields()
    },
    ok() {
      console.log(123)
      var _this = this
      //   var params = {}
      console.log()
      _this.$refs.form.validate(valid => {
        if (valid) {
          request({
            url: '/activityConsole/activityBargain/updateGoodsTypeMessage',
            method: 'post',
            data: _this.form
          }).then(res => {
            console.log(res)
            if (res.status == '200') {
              _this.init()
              _this.cancel()
              _this.$refs.form.resetFields()
              //   _this.form.createTime = ''
              //   _this.form.symbol = ''
              //   _this.form.goodsTypeName = ''
              //   _this.form.gtid = ''
              //   _this.dialogFormVisible = false
              _this.$message({
                type: 'success',
                message: res.description
              })
            } else {
              _this.$message({
                type: 'fail',
                message: res.description
              })
            }
          }).then(err => {
            console.log(err)
          })
        }
      })
    },
    editReserve() {
      console.log(123)
    },
    editHandle(row) {
      console.log(row)
      this.form.goodsTypeName = row.goodsTypeName
      this.form.gtid = row.gtid
      this.form.createTime = row.createTime
      this.form.symbol = row.symbol
      this.dialogFormVisible = true
    },
    delHandle(row, index) {
      const _this = this
      this.$confirm('此操作将永久删除该商品类型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'green-btn pan-btn',
        type: 'warning'
      }).then(() => {
        request({
          url: '/activityConsole/activityBargain/delType/' + row.gtid,
          method: 'DELETE'
        }).then(res => {
          if (res.deleteFlag == 'true') {
            _this.tableData.splice(index, 1)
          }
          _this.$message({
            type: 'success',
            message: '删除成功！'
          })
        }).catch(err => {
          console.log(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    timeFormat(row, column) {
      const date = row[column.property]
      return parseTime(date)
    }
  }
}
</script>
